<template>
    <div class="appeal-index">
        <div class="item">
            <div class="title">申诉理由</div>
            <div class="input"><input type="text" readonly v-model="reason"></div>
        </div>
        <div class="item">
            <div class="title">姓名</div>
            <div class="input"><input placeholder="请输入您的姓名" type="text" v-model="name"></div>
        </div>
        <div class="item">
            <div class="title">身份证</div>
            <div class="input"><input placeholder="请输入您的身份证号" type="text" v-model="idcard"></div>
        </div>
        <div class="item">
            <div class="title">联系号码</div>
            <div class="input"><input placeholder="请输入您的联系号码" type="text" v-model="phone"></div>
        </div>
        <div class="item">
            <div class="title">上传手持身份证照片</div>
            <div class="img">
                <img v-if="src==''" src="../../assets/image/example.png" alt="">
                <img ref="imgss" v-if="src!=''" :src="src" alt="">
            </div>
            <p><span  @click="takephoto()">点击上传</span><img @click="open()" src="../../assets/image/wh.png" alt=""></p>
        </div>
        <div @click="subit()" class="authentication">提交</div>
        <div class="popup-container">
            <mt-popup
              v-model="popupVisible"
              position="top"
              :modal="modal">
              {{popupContent}}
            </mt-popup>
        </div>
        <div :class="['img-modal',{'opacity': isclose}]">
            <div class="close"><img @click="close()" src="../../assets/image/cha.png" alt=""></div>
            <div class="img">
                <img src="../../assets/image/example.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../common/header';
import axios from 'axios';
import Wx from 'weixin-js-sdk';
import utils from '../../extend/utils.js';
import { MessageBox, Toast, Popup } from 'mint-ui';
export default {
    data () {
        return {
            reason: '',
            name: '',
            idcard: '',
            phone: '',
            popupContent: '',
            modal: false,
            popupVisible: false,
            src: '',
            isclose: true,
            hotel_name: this.$route.query.hotel_name,
            obj: {},
            appeal_reason: this.$route.query.appeal_reason,
            cardArr: this.$route.query.cardInfo,
            cardInfo: {},
            reason_type: ''
        }
    },
    components: {
        'mt-popup': Popup,  
    },
    created() {
        const vm = this;
        if(vm.cardArr!=''){
            vm.cardArr =  utils.decrypt(this.$route.query.cardInfo,'hAw6eqnFLKxpsDv3');
            vm.cardArr = JSON.parse(vm.cardArr);
            console.log(vm.cardArr,'Arr')
            vm.name = vm.cardArr.name;
            vm.idcard = vm.cardArr.id_card_number;
        }
        if(vm.appeal_reason == 1){
            vm.reason = '信息识别错误';
            vm.reason_type ='1';
        }else {
            vm.reason = '证件重复';
             vm.reason_type = '0';
        }
        if(vm.cardArr.gender == '男'){
            vm.cardArr.gender = 'male';
        }else if(vm.cardArr.gender == '女'){
            vm.cardArr.gender = 'famale';
        }else if(vm.cardArr.gender == 'null'){
            vm.cardArr.gender = '未知';
        }
        vm.cardInfo['name'] =  vm.cardArr.name;
        vm.cardInfo['gender'] =  vm.cardArr.gender;
        vm.cardInfo['birthDate'] =  vm.cardArr.birthday||vm.cardArr.birthDate;
        vm.cardInfo['idNumber'] =  vm.cardArr.id_card_number||vm.cardArr.idNumber;
        vm.cardInfo['nation'] =  vm.cardArr.race||vm.cardArr.nation;
        vm.cardInfo['address'] =  vm.cardArr.address;
        console.log(vm.cardInfo,'mounred')
    },
    mounted() {
        const vm = this;
        
       
    },
    mounted() {
        const vm = this;
        let url = window.location.href;
        vm.wxShare(url);
    },
    methods: {
         takephoto(){
            const vm = this,
            // vm.src='http://ldfs.oss-cn-shenzhen.aliyuncs.com/14539884e9e259cbd08098b3105028df.jpg'
            upload = vm.wxUpload(Wx);
            let ajaxUp = function(id) {
                axios.post('/Api/Upload/downloadWxImage', {'media_id': id}).then(json => {
                    vm.sheetVisible = false;
                    // 上传成功，后台不保存，前台更新用户头像
                    if (json.data.code == 1) {
                            vm.src = json.data.url;
                            console.log(vm.src,555555555555);
                            console.log(vm.$refs.imgss);
                    } else {
                        MessageBox.alert(json.data.msg);
                    }
                }, function() {
                    MessageBox.alert('网络异常，上传失败');
                });
            }
            Wx.ready(function(){
                upload.chooseImg(ajaxUp, 1);
            });
        },
        close(){
            const vm = this;
            vm.isclose = true;
        },
        open(){
            const vm  = this;
            vm.isclose = false;
        },
        popup(str){
            const vm = this;
            vm.modal = true;
            vm.popupVisible = true;
            vm.popupContent = str;
            setTimeout(function() {
                vm.popupVisible = false;
            }, 1600);
        },
        subit(){
            const vm = this;
            
            if(!this.reason){
                vm.popup('请输入申诉理由')
                return;
            } 
            if(!this.name){
                vm.popup('请输入姓名')
                return;
            } 
            let reg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/;
            let reg18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(vm.idcard.length<=15){
                if(!reg15.test(vm.idcard)){
                    vm.popup('请填写正确的身份证号码');
                    return;
                }
            }else if(vm.idcard.length>15) {
                if(!reg18.test(vm.idcard)){
                    vm.popup('请填写正确的身份证号码');
                    return;
                }
            }
            let phoneReg = /^1[34578]\d{9}$/;
            if(!phoneReg.test(this.phone)){
                vm.popup('请输入正确的联系号码')
                return;
            } 
            if(this.src==''){
                vm.popup('请上传身份证照片')
                return;
            } 
            
            vm.obj = {
                type: vm.reason_type,
                hotel_name: vm.hotel_name,
                name: vm.name,
                idNumber: vm.idcard,
                phone: vm.phone,
                img: vm.src,
                card_info: vm.cardInfo
            }
            console.log(vm.obj)
            axios.post('/Weixin/Appeal/appealAdd', vm.obj)
            .then(res => {
                const data = res.data;
                console.log(data);
                if (data.code == 1) {
                    vm.$router.replace('/appealsuccess');
                } else {
                    MessageBox.alert(data.msg)
                }
            }).catch(()=>{
                MessageBox.alert('网络错误');
            });

        }
    },
}
</script>

<style>

</style>
